import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { Table,Avatar,Button,Divider,Form} from 'antd';
import styles from './index.less';
//0  未开通  1 开通 （正常） 2 冻结 3 删除
const radioStationStatus = ['未开通','开通','冻结','删除'];
@connect(state => ({
  radioStation: state.radioStation,
}))
@Form.create()
class RadioStationTable extends PureComponent {
  state = {
    rsData:[]
  };

  componentWillReceiveProps(nextProps) {
    const { radioStationData: {errorCode,msg,data:{pageNo,pageCount,total,pageSize,list}}, loading } = nextProps;
    this.setState({
      rsData:list
    });
  }
  //table分页、排序、筛选变化时触发
  handleTableChange = (pagination, filters, sorter) => {
    this.props.onChange(pagination, filters, sorter);
  }

  /**
   * 修改电台的状态 删除 冻结 开通
   * @param record
   * @param status
   */
  updateRadioStationStatus = (record,status) => {
    this.props.updateRadioStationStatus(record,status);
  }

  handleGenerateTitle= (total) => {
   return (
     <div>
          <Button type="success" onClick={()=>this.turnToRadioStationAddPage()}>添加电台</Button>
          <span style={{marginLeft:20}}>全部电台（{total}）</span>
     </div>
   );
  }

  /**
   * 跳转到 新增 编辑 查看 电台页面
   * @param id
   * @param showDetail
   */
  turnToRadioStationAddPage(id,showDetail){
    const { dispatch} = this.props;

    if(id) {
      const param = {
        rsId:id
      }
      if(showDetail){
        param.showDetail = showDetail;
      }
      dispatch({
        type: 'radioStation/turnToRadioStationAddPage',
        payload:param
      });
    }else{
      dispatch({
        type: 'radioStation/turnToRadioStationAddPage'
      });
    }

  }

  render() {
    const { rsData } = this.state;
    const { radioStationData: {errorCode,msg,data:{pageNo,pageCount,total,pageSize,list}}, loading } = this.props;
    const columns = [
      {
        title: '电台名称',
        dataIndex: 'rsName',
        render:(text, record, index) => (
          <div>
              <Avatar style={{ verticalAlign: 'middle' }} src={record.rsLogo} />
              <span style={{ marginLeft: 6, verticalAlign: 'middle' }} >
                  {text}
              </span>
          </div>
        )
      },{
        title: '所属单位',
        dataIndex: 'rsSubordinateUnits',
      },{
        title: '电台地址',
        dataIndex: 'rsAddress',
      },{
        title: '状态',
        dataIndex: 'rsStatus',
        render:(text, record, index) => (
          <div>
            {radioStationStatus[record.rsStatus]}
          </div>
        )
      },{
        title: '开通时间',
        dataIndex: 'createTime',
        render:(text, record, index) => (
          <div>
            {moment(record.createTime).format('YYYY-MM-DD HH:mm:ss')}
          </div>
        )
      },
      {
        title: '操作',
        render: (text,record,index) => (
          <div>
            <a onClick={() => this.turnToRadioStationAddPage(record.id,true)} >详细信息</a>
            <Divider type="vertical" />
            <a onClick={() => this.turnToRadioStationAddPage(record.id,false)} >编辑</a>
            <Divider type="vertical" />
            <a onClick={()=>this.updateRadioStationStatus(record,3)}>删除</a>
            <Divider type="vertical" />
            <a onClick={()=>this.updateRadioStationStatus(record,2)}>冻结</a>
            <Divider type="vertical" />
            <a onClick={()=>this.updateRadioStationStatus(record,1)}>开通</a>
          </div>
        ),
      },
    ];

    const paginationProps = {
      pageSize:pageSize,
      total:total,
      current:pageNo,
    };


    return (
      <div className={styles.msgTable}>
        <Table
          title={() => this.handleGenerateTitle(total)}
          loading={loading}
          rowKey={record => record.id}
          dataSource={rsData}
          columns={columns}
          pagination={paginationProps}
          onChange={this.handleTableChange}
        />
      </div>
    );
  }
}

export default RadioStationTable;
